Cilj ovih uputa je upoznati učenike sa postavljanjem radne okoline potrebne za realizaciju složenijih web aplikacija. Opisan je način kako postaviti radnu okolinu za razvoj PHP dokumenta na našem računalu koristeći XAMPP web server i Aptana studio 3. Dobra stvar kod ovih programa je to da oni rade na Linux, Mac, Solaris i Windows računalima te smanjuju broj programa koji trebaju biti instalirani. Uz to oba programa su lako dostupna i besplatna!

Većina 'developera' razvija web stranice u svojem razvojnom okruženju na nekom od vlastitih lokalnih web servera. Lokalni web server je isti kao i svaki drugi server na mreži samo je razlika u tome što je on postavljen na vašem računalu, dakle lokalno, što znači da mu nije moguće pristupiti koristeći web preglednik i Internet. Glavni preduvjet vlastitog razvojnog okruženja za razvoj web aplikacija je upravo postavljanje lokalnog servera. Da ne bismo morali posebno preuzimati Apache, PHP i MySQL koji su nam neophodni prilikom razvoja web aplikacija, postoje paketi koje lako instaliramo na naše računalo. U poglavlju koje slijedi opisan je proces instalacije i konfiguracije XAMPP paketa.

Instalacija XAMPP web servera

XAMPP paket u sebi, između ostalog, sadrži nama neophodni web-poslužitelj Apache, MySQL poslužitelj baze podataka i PHP interpreter. Prilikom instalacije XAMPP paketa, instaliraju se i sve ove komponente.

Osim što se paket mora instalirati s administratorskim ovlastima, instalacija je vrlo jednostavna i ne bi trebali imati nikakvih problema.

XAMPP paket moguće je skinuti sa sljedeće adrese: https://www.apachefriends.org/index.html

Slijedi instalacija web servera po koracima:

Kliknite na NEXT.

U drugom koraku možemo odabrati značajke koje su nam potrebne, u ovom primjeru ćemo prihvatiti sve zadane postavke. Zatim kliknite na tipku NEXT. Postavke možete promijeniti kasnije uređivanjem konfiguracijske datoteke.

U trećem koraku biramo mapu za instalaciju. Bilo bi poželjno da odaberete onu mapu gdje nisu instalirani Windowsi, u slučaju da ih morate ponovno instalirati vaš server zajedno sa svim podacima će biti na sigurnom. Kada ste odabrali odredište kliknite na NEXT.

Kliknite na NEXT.

Sve je spremno za instalaciju, u ovom koraku također kliknite NEXT.

Započinje proces instalacije.

Nakon što se instalacija završi kliknite na FINISH.

Instalacija je gotova!

Nakon što pokrenemo Xampp potrebno je odabrati željeni jezik.

Na sljedećoj slici vidimo kako su Apache i MySQL instalirani i aktivni(Running). Apache i MySQL pokrećemo tako što kliknemo na start.

Sada je XAMPP instaliran na C:\, dok se php datoteke moraju uvijek držati u direktoriju koji pod nazivom htdocs, u ovom slučaju C:\xampp\htdocs.

Kako bi provjerili jesmo li uspješno instalirali XAMPP na našem računalu, potrebno je otvoriti preglednik i upisati 'localhost' u adresnoj traci, ukoliko je instalacija uspješna preusmjereni ste na stranicu na kojoj piše da je uspješno instaliran XAMPP u vašem sustavu.

Nakon toga, potrebno je unutar mape htdocs obrisati sve datoteke i direktorije.

Nakon toga u adresu svog preglednika ponovno upišite 'localhost'. Sada bi vam preglednik trebao izgledati kao na sljedećoj slici.

Instalacija Aptana Studio IDE

IDE (Integrated Development Enviroment) je integrirano razvojno okruženje koje koristimo za razvoj aplikacija. Postoji mnogo vrsta IDE-ova, no mi ćemo za potrebe ovih uputa odabrati Aptana studio 3. Aptana studio 3 je besplatan i stabilan IDE koji se bez problema može instalirati na sve operacijske sustave, a unutar njega možemo razvijati PHP, Ruby on Rails ili Python aplikacije.

Za početak potrebno je preuzeti Aptanu sa poveznice aptana.com

Nakon što smo preuzeli Aptanu pokrenemo instalaciju dvoklikom na ikonu.

Slijedi instalacija po koracima:

Kliknemo na NEXT kako bi započeli instalaciju

Također kliknemo na NEXT.

Započinje preuzimanje

Tijekom instalacije Xampp-a pojaviti će nam se prozor za instalaciju Jave. Potrebno je kliknuti na INSTALL.

U ovom koraku kliknemo na FINISH.

Sada započinje instalacija Aptane na naše računalo. Kliknemo na INSTALL.

Ukoliko nam se tijekom instalacije pojavi greška, potrebno je otvoriti stranicu http://go.aptana.com/installer_nodejs_windows te instalirati node.js.

Nakon nekog vremena pokrenuti će na nam se instalacija GIT-a.

Kliknemo na FINISH.

Instalacija Aptane je gotova!

Program pokrećemo klikom na ikonu.

Potrebno je odabrati mapu u koju ćemo spremati naše projekte. To će biti već ranije stvorena mapa htdocs unutar mape xampp na C disku.

Nakon toga bi nam se trebao otvoriti ovaj prozor za rad u Aptani.

Za vježbu ćemo napraviti jedan jednostavni projekt. Potrebno je pratiti upute.

New → PHP Project

Otvoriti će nam se sljedeći prozorčić koji je potrebno popuniti.

Zatim ćemo napraviti novi dokument

Povezati ćemo ga sa projektom koji smo maloprije kreirali.

Zatim se otvara prostor za upisivanje koda

Upisati ćemo jednostavniji kod za potrebe primjera.

Zatim ga pokrenuti da pogledamo kako to sada izgleda u web pregledniku

Potrebno je ispuniti prikazana polja, a zatim kliknuti RUN

A ovako to izgleda u pregledniku!

Datotekama koje kreiramo pristupamo putem Internet preglednika na način da upišemo http://localhost/{ovdje ide putanja} ili s IP adresom http://127.0.0.1/{ovdje ide putanja}.

Osim na lokalnom serveru web stranice je moguće razvijati i na “live serveru”, no to nije preporučljivo, najviše zbog potrošnje resursa koje većina hosting poslužitelja ograničava. Još jedan razlog je taj što nikome nije u interesu da posjetitelji vide razvojne faze vaše web stranice

Drugi načini razvoja web stranica su npr. kroz integrirano razvojno okruženje u oblaku (cloud IDE) gdje na jednome mjestu postoje potrebni alati za razvoj i testiranje web stranice prije objave na predviđeni hosting paket.

Ove upute će poslužiti samo kao polazište, no za uspješnu izradu aplikacije potrebno je detaljnije proučiti korištene tehnologije koristeći dodatnu literaturu.

Literatura

XAMPP sve o ovoj temi.

URL: http://wmforum.geek.hr/t/xampp-sve-u-ovoj-temi/27697

Kako instalirati Aptana studio IDE na Windows OS-u?

URL: http://www.ucionica.net/programiranje/kako-instalirati-aptana-studio-ide-na-windows-os-u-1055/

Kako postaviti lokalni server?

URL: http://darko-novak.from.hr/kako-postaviti-lokalni-server/

Frid Nikolina, Sruk Vlado. Kratke upute za izradu projektnog zadatka, rujan 2013.

URL: https://www.fer.unizg.hr/_download/repository/Upute_Web_aplikacija.pdf